<template>
    <!-- component/navs/navs.wxml -->
    <view class="STH_navs_panel">
        <view :class="'navlist ' + cssstyle" v-for="(item, idx) in NavList" :key="idx">
            <view @tap="link" :data-info="item" :style="'background-color:' + FbgColor + ';'">
                <view class="icon">
                    <image mode="scaleToFill" :src="item.FnavImg" alt=""></image>
                </view>
                <view class="text" :style="'color:' + item.FtextColor + ';'">{{ item.FnavText }}</view>
            </view>
        </view>
    </view>
</template>

<script>
// component/navs/navs.js
var util = require('../../utils/util.js');
export default {
    data() {
        return {
            prop: null,
            NavList: [],
            cssstyle: 'style1 icon_top',
            FbgColor: ''
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        con: {
            type: Object
        }
    },
    mounted() {
        // 处理小程序 ready 生命周期
        this.$nextTick(() => this.ready());
    },
    /**
     * 组件的方法列表
     */
    methods: {
        ready: function () {
            var that = this;
            var con = that.con;
            var prop = JSON.parse(con.prop);
			that.prop = prop;
			that.NavList = con.NavList;
           
            var navStyle = prop.navStyle;
            var iconStyle = prop.iconStyle;
            if (navStyle == 'style1') {
                if (iconStyle == 'icon_none') {
                    iconStyle = 'icon_top';
                }
            } else {
                if (iconStyle == 'icon_none') {
                    iconStyle = 'icon_left';
                }
            }
            that.cssstyle = navStyle + ' ' + iconStyle;
        },

        link: function (e) {
            var that = this;
            var data = e.currentTarget.dataset.info;
            var url = '';
            if (util.isEmpty(data.Ftypeid)) {
                return;
            }
            //微页面
            if (data.Ftype == 1) {
                url = '/pages/wpage/wpage?Ftypeid=' + data.Ftypeid;
            } else if (data.Ftype == 2) {
                //商品分类
                url = '/pages/proList/proList?Ftypeid=' + data.Ftypeid;
            }
            if (url == '') {
                return;
            }
            uni.navigateTo({
                url: url
            });
        }
    },
    created: function () {}
};
</script>
<style>
@import './navs.css';
</style>
